<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="drawing" width="200" height="200">A Drawing of something</canvas>
    <script>
        var drawing = document.getElementById("drawing");
        //确定浏览器支持<canvas>元素
        if (drawing.getContext) {
            //取得绘图上下文对象的引用，“2d”是取得2D上下文对象
            var context = drawing.getContext("2d");
            //取得图像的数据URI
            var imgURI = drawing.toDataURL("image/png");
            // alert(imgURI);
            //显示图像
            var image = document.createElement("img");
            image.src = imgURI;
            document.body.appendChild(image);
        }
    </script>
</body>

</html>